<template>
  <div class="cart">
    <header>
      <div class="w">
        <p @click="exit">{{ isExit ? "完成" : "编辑" }}</p>
        <p>购物车</p>
        <p></p>
      </div>
    </header>
    <div class="showCart" :style="{ minHeight: $store.state.shopCart.length === 0 ? '10rem' : '' }">
      <ul>
        <li v-for="item in cart" :key="item.id">
          <div>
            <input type="checkbox" v-model="item.ckd" @change="ckdOne(item)" />
          </div>
          <div>
            <img :src="item.pic" alt="" />
          </div>
          <div class="info">
            <p>{{ item.name }}</p>
            <div class="stepper-box">
              <p>￥{{ item.pri }}元</p>
              <div class="stepper">
                <minus
                  theme="outline"
                  size="22"
                  fill="#333"
                  @click.native="changeCount(item, -1)"
                />
                <span v-text="item.count"></span>
                <plus theme="outline" size="22" fill="#333" @click.native="changeCount(item, +1)" />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="guessLike">
      <h3>猜你喜欢</h3>
      <ul>
        <li
          v-for="item in lists"
          :key="item.id"
          @click="
            $router.push({
              path: '/details',
              query: {
                id: item.id,
              },
            })
          "
        >
          <div class="img">
            <img :src="item.pic" alt="" />
            <p>{{ item.name }}</p>
          </div>
          <p>{{ item.name }}</p>
          <p class="sell">
            <span>￥{{ item.pingtuanPrice }}</span>
            <span>已售{{ item.numberSells }}</span>
          </p>
        </li>
      </ul>
    </div>
    <div class="submit-bar" v-if="shopCart.length !== 0">
      <div class="w">
        <div class="left">
          <input type="checkbox" @change="ckAll" v-model="allCkd" />
          全选
        </div>
        <div class="right">
          <div>合计：￥{{ $store.getters.calcPrice }}</div>
          <div class="btn">{{ isExit ? "删除" : "下单" }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { Minus, Plus } from "@icon-park/vue"
  import { mapState, mapMutations } from "vuex"
  import { getRenqi } from "@/utils/api/index"
  export default {
    name: "cart",
    data() {
      return {
        isExit: false,
        lists: [],
        cart: [],
        allCkd: false,
      }
    },
    components: {
      Minus,
      Plus,
    },
    methods: {
      exit() {
        this.isExit = !this.isExit
      },
      ckAll() {
        this.$store.commit("setAllCkd", this.allCkd)
      },
      ckdOne(item) {
        this.$store.commit("setOneCkd", {
          id: item.id,
          ckd: item.ckd,
        })
      },
      changeCount(item, val) {
        if (item.count === 1 && val === -1) return
        item.count += val
        console.log(item.count)
        this.$store.commit("setCount", {
          id: item.id,
          count: item.count,
        })
      },
    },
    computed: {
      ...mapState(["shopCart"]),
      getInfo() {
        console.log(this)
        return (id) => {
          return this.shopCart.filter((item) => item.id === id)[0]
        }
      },
    },
    created() {
      this.allCkd = this.shopCart.every((item) => item.ckd)
      getRenqi().then((res) => {
        let arr = []
        while (arr.length < 4) {
          let randomNum = Math.floor(Math.random() * res.data.length)
          if (arr.indexOf(randomNum) === -1) {
            arr.push(randomNum)
          }
        }
        arr.forEach((item) => {
          this.lists.push(res.data[item])
        })
        this.cart = this.$store.state.shopCart
      })
    },
    watch: {
      shopCart: {
        deep: true,
        handler() {
          this.allCkd = this.shopCart.every((item) => item.ckd)
        },
      },
    },
  }
</script>
<style lang="scss" scoped>
  .cart {
    overflow-y: auto;
    height: calc(100% - 1rem);
  }
  header {
    height: 0.8rem;
    .w {
      height: 0.8rem;
      position: fixed;
      top: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      height: 0.8rem;
      padding: 0 0.2rem;
      width: 100%;
      background-color: #fff;
      border-bottom: 1px solid #e9e9e9;
      p:first-child {
        color: #d00000;
      }
    }
  }
  .showCart {
    li {
      display: flex;
      padding: 0.4rem 0.2rem;
      border-bottom: 0.14rem solid #f5f5f5;
      .info {
        font-size: 0.26rem;
        border: none;
        padding: 0;
        color: #000;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 1;
        .stepper-box {
          display: flex;
          justify-content: space-between;
          .stepper {
            display: flex;
            align-items: center;
            span:nth-child(2) {
              display: inline-block;
              width: 0.6rem;
              text-align: center;
              background-color: #f2f3f5;
              margin: 0 0.1rem;
              height: 0.44rem;
              line-height: 0.44rem;
            }
            .i-icon {
              background-color: #f2f3f5;
              display: flex;
            }
          }
        }
      }
    }
    img {
      width: 1.6rem;
      height: 1.6rem;
      display: block;
      margin: 0 0.2rem;
      border-radius: 0.1rem;
    }
  }
  .guessLike {
    font-size: 0.3rem;
    h3 {
      text-align: center;
      margin: 0.3rem 0;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 0.24rem;
      li {
        width: 3.4rem;
        p {
          width: 100%;
          padding: 0.1rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          box-sizing: border-box;
          font-size: 0.28rem;
          padding: 0.2rem 0;
        }
        .img {
          img {
            width: 3.4rem;
            height: 4.3rem;
            display: block;
          }
          position: relative;
          p {
            position: absolute;
            bottom: 0;
            background-color: #f0edd4;
            color: #b69b72;
            width: 100%;
            padding: 0.1rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            box-sizing: border-box;
            font-size: 0.24rem;
          }
        }
        .sell {
          display: flex;
          justify-content: space-between;
          span:first-child {
            font-size: 0.28rem;
            color: #d00000;
          }
          span:last-child {
            color: gray;
            font-size: 0.24rem;
          }
        }
      }
    }
  }
  .submit-bar {
    height: 1rem;
    .w {
      width: 100%;
      height: 1rem;
      position: fixed;
      bottom: 1rem;
      background-color: #fff;
      font-size: 0.28rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        margin-left: 0.4rem;
        flex-grow: 0;
      }
      .right {
        flex-grow: 0;
        display: flex;
        height: 100%;
        align-items: center;
        color: #d00000;
        .btn {
          width: 2.4rem;
          height: 100%;
          text-align: center;
          background-color: #d00000;
          line-height: 1rem;
          color: #fff;
          margin-left: 0.4rem;
        }
      }
    }
  }
</style>
